<template>
	<div>
		<div class="cons">
		<el-form>
			<el-form-item label="选择日期">
			      <el-date-picker
			        v-model="dates.date"
			        type="datetime"
					value-format="yyyy-MM-dd HH:mm:ss"
			        placeholder="选择日期时间">
			      </el-date-picker>
			 </el-form-item>
			<el-input v-model="roomid" placeholder="请输入房间类型"></el-input>
			<el-input v-model="louceng" placeholder="请输入楼层"></el-input>
			<el-button type="primary" round icon="el-icon-search" @click="selectRoom()">客房查询</el-button>
			<el-button type="warning" round @click="yudings = true">查看预定信息</el-button>
			<el-table  :data="rooms.list" style="100%">
				<el-table-column
				label="房间号"
				prop="id"
				width="80"
				></el-table-column>
				
				<el-table-column
				label="房间类型"
				prop="roomTypeid.roletype"
				width="80"
				></el-table-column>
				
				<el-table-column
				label="状态"
				prop="status"
				width="80"
				></el-table-column>
				
				<el-table-column
				label="楼层"
				prop="levelid.storey"
				width="80"
				></el-table-column>
				
				<el-table-column
				label="人数"
				prop="roomTypeid.roomnum"
				width="80"
				></el-table-column>
				
				<el-table-column
				label="普通价格"
				prop="standardprice"
				width="80"
				></el-table-column>
				
				<el-table-column
				label="折扣价格"
				prop="discountprice"
				width="80"
				></el-table-column>
				
				<el-table-column
				label="会员价格"
				prop="commonprice"
				width="80"
				></el-table-column>
				
				<el-table-column
				label="VIP价格"
				prop="vipvip"
				width="80"
				></el-table-column>
				
				
				<el-table-column label="操作" >
					<template slot-scope="scope">
					<template  v-if="scope.row.status == '空房'">
						
						 <el-button type="primary" round @click="yuding(scope.row)">预定</el-button>
					</template>
					<template  v-else-if="scope.row.status == '已预定'">
						  
						 <el-button type="warning" round>已预定</el-button>
					</template>
					<template v-else>
						
						<el-button type="info" round disabled>已入住</el-button>
					</template>
					</template>
				</el-table-column>

			</el-table>
		<el-pagination
			:total="rooms.total"
			:page-count="rooms.nevigatePages"
			:page-size="rooms.pageSize"
			:current-page="rooms.pageNum"
			
			layout="prev,pager,next,total,jumper"
			background
			@current-change="handleCurrentChange"
			
		>
			
		</el-pagination>
			
			<el-dialog :visible.sync="disable" title="客房预定" center>
				
				<el-form :inline="true" align="center" :model="type" :rules="rules" ref="loginForm">
				  <el-form-item label="*预定单号">
				    <el-input  v-model="type.duenum"></el-input>
				  </el-form-item>
				<el-form-item label="客房编号" prop="roomcode">
				    <el-input v-model="type.roomcode" readonly ></el-input>
				  </el-form-item>
				  <el-form-item label="客房类型"  prop="roomtype">
				    <el-input v-model="type.roomtype" readonly ></el-input>
				  </el-form-item>
				  <el-form-item label="标准价格"  prop="standardprice">
				    <el-input  v-model="type.standardprice" readonly></el-input>
				  </el-form-item>
				  <el-form-item label="折后价格"  prop="discountprice">
				    <el-input  v-model="type.discountprice" readonly></el-input>
				  </el-form-item>
				  <el-form-item label="押金">
				    <el-input  v-model="type.yajin"></el-input>
				  </el-form-item>
				  <el-form-item label="预定人 "  prop="dueperson">
				   <el-input  v-model="type.dueperson"></el-input>
				  </el-form-item>
				  <el-form-item label="证件类别"  prop="cretype">
				    <el-input  v-model="type.cretype"></el-input>
				  </el-form-item>
				
				<el-form-item label="证件号码"  prop="crenum">
				    <el-input  v-model="type.crenum"></el-input>
				  </el-form-item>
				
				<el-form-item label="电话号码"  prop="phone">
				    <el-input  v-model="type.phone"></el-input>
				  </el-form-item>
				
				<el-form-item label="抵店时间"  prop="arrivetime">
				      <el-date-picker
				        v-model="type.arrivetime"
				        type="datetime"
						value-format="yyyy-MM-dd HH:mm:ss"
				        placeholder="选择日期时间">
				      </el-date-picker>
				 </el-form-item>
				  
				  <el-form-item label="离店时间 "  prop="leavetime">
				     <el-date-picker
						v-model="type.leavetime"
					      type="datetime"
					      value-format="yyyy-MM-dd HH:mm:ss"
					      placeholder="选择日期时间">
					 ></el-date-picker>
				    </el-form-item>
				
				<el-form-item label="入住人数"  prop="roomnum">
				    <el-input  v-model="type.roomnum"></el-input>
				  </el-form-item>
				
				<el-form-item label="操作员">
				    <el-input  v-model="type.caozuoren"></el-input>
				  </el-form-item>
				  
				  <el-form-item label="会员编号">
				      <el-input  v-model="type.vipcode"></el-input>
				    </el-form-item>
					
					<el-form-item label="会员价">
					    <el-input  v-model="type.vipprice"></el-input>
					  </el-form-item>
					  
					 <el-form-item label="预定状态">
					     <el-input readonly v-model="type.status"></el-input>
						
					    </el-form-item>
				
					<el-form-item>						<el-button type="warning" @click="disable = false">取消</el-button>						<el-button  type="primary" @click="insertType()">预定</el-button>					</el-form-item>
				</el-form>
			</el-dialog>
			<el-dialog :visible.sync="yudings" title="预定客人列表" center>
				
				<el-form :inline="true" align="center" >
					<el-form-item label="选择日期">
					      <el-date-picker
					        v-model="infodates.infodate"
					        type="date"
							value-format="yyyy-MM-dd HH:mm:ss"
					        placeholder="选择日期时间">
					      </el-date-picker>
						<el-button type="primary" round icon="el-icon-search" @click="selectinfo()">预定查询</el-button>
					</el-form-item>
					<br>
					<el-table  :data="roomdue.list" style="100%">
						<el-table-column
						label="预定单号"
						prop="duenum"
						width="200"
						></el-table-column>
						<el-table-column
						label="房间号"
						prop="roomcode"
						width="80"
						></el-table-column>
						<el-table-column
						label="客房类型"
						prop="roomtype"
						width="80"
						></el-table-column>
						<el-table-column
						label="标准价格"
						prop="standardprice"
						width="80"
						></el-table-column>
						<el-table-column
						label="折后价格"
						prop="discountprice"
						width="80"
						></el-table-column>
						<el-table-column
						label="押金"
						prop="yajin"
						width="80"
						></el-table-column>
						<el-table-column
						label="预定人"
						prop="dueperson"
						width="80"
						></el-table-column>
						<el-table-column
						label="证件类别"
						prop="cretype"
						width="80"
						></el-table-column>
						<el-table-column
						label="证件号码"
						prop="crenum"
						width="120"
						></el-table-column>
						<el-table-column
						label="电话号码"
						prop="phone"
						width="120"
						></el-table-column>
						
						<el-table-column
						label="抵店时间"
						prop="arrivetime"
						width="200"
						></el-table-column>
						<el-table-column
						label="离店时间"
						prop="leavetime"
						width="200"
						></el-table-column>
						<el-table-column
						label="入住人数"
						prop="roomnum"
						width="80"
						></el-table-column>
						<el-table-column
						label="操作人"
						prop="caozuoren"
						width="80"
						></el-table-column>
						<el-table-column
						label="会员编号"
						prop="vipcode"
						width="80"
						></el-table-column>
						<el-table-column
						label="会员价格"
						prop="vipprice"
						width="80"
						></el-table-column>
						
						<el-table-column
						label="状态"
						width="120"
						prop="status"
						>
						<!-- <template slot-scope="scope">
						
						<template v-if="scope.row.status == 1">
							正常
						</template>
						<template v-else-if="scope.row.status == 2">
							取消
						</template>
						<template v-else-if="scope.row.status == 3">
							已入住
						</template>
						</template> -->
						</el-table-column>
						
						<el-table-column label="操作"width="200">
							<template slot-scope="scope">
						  <el-button type="primary" icon="el-icon-edit"  @click="xiugais(scope.row)" circle></el-button>
							
						
							<el-button type="danger"  icon="el-icon-delete" @click="del(scope.row)"></el-button>
							</template>
						</el-table-column>
						
						
						
					</el-table>
				</el-form>
			</el-dialog>
			
			<el-dialog :visible.sync="xiugai" title="修改预定信息" center>
				<el-form :inline="true" align="center" >
				  <el-form-item label="*预定单号">
				    <el-input readonly v-model="xiugaihou.duenum"></el-input>
				  </el-form-item>
				  <el-form-item label="*客房编号">
				    <el-input v-model="xiugaihou.roomcode" ></el-input>
				  </el-form-item>
				  <el-form-item label="*客房类型">
				    <el-input v-model="xiugaihou.roomtype" ></el-input>
				  </el-form-item>
				  <el-form-item label="标准价格">
				    <el-input  v-model="xiugaihou.standardprice"></el-input>
				  </el-form-item>
				  <el-form-item label="折后价格">
				    <el-input  v-model="xiugaihou.discountprice"></el-input>
				  </el-form-item>
				  <el-form-item label="押金">
				    <el-input  v-model="xiugaihou.yajin"></el-input>
				  </el-form-item>
				  <el-form-item label="*预定人 ">
				   <el-input  v-model="xiugaihou.dueperson"></el-input>
				  </el-form-item>
				  <el-form-item label="*证件类别">
				    <el-input  v-model="xiugaihou.cretype"></el-input>
				  </el-form-item>
				
				<el-form-item label="*证件号码">
				    <el-input  v-model="xiugaihou.crenum"></el-input>
				  </el-form-item>
				
				<el-form-item label="*电话号码">
				    <el-input  v-model="xiugaihou.phone"></el-input>
				  </el-form-item>
				
				<el-form-item label="*抵店时间">
				      <el-date-picker
				        v-model="xiugaihou.arrivetime"
				        type="datetime"
						value-format="yyyy-MM-dd HH:mm:ss"
				        placeholder="选择日期时间">
				      </el-date-picker>
				 </el-form-item>
				  
				  <el-form-item label="*离店时间">
				     <el-date-picker
						v-model="xiugaihou.leavetime"
					      type="datetime"
					      value-format="yyyy-MM-dd HH:mm:ss"
					      placeholder="选择日期时间">
					 ></el-date-picker>
				    </el-form-item>
				
				<el-form-item label="*入住人数">
				    <el-input  v-model="xiugaihou.roomnum"></el-input>
				  </el-form-item>
				
				<el-form-item label="操作员">
				    <el-input  v-model="xiugaihou.caozuoren"></el-input>
				  </el-form-item>
				  
				  <el-form-item label="会员编号">
				      <el-input  v-model="xiugaihou.vipcode"></el-input>
				    </el-form-item>
					
					<el-form-item label="会员价">
					    <el-input  v-model="xiugaihou.vipprice"></el-input>
					  </el-form-item>
					  <el-form-item label="状态">
					      <el-select v-model="xiugaihou.status">
					      	<el-option label="正常" value= 1></el-option>
					      	<el-option label="已取消" value=2></el-option>
					      	<el-option label="已入住" value=3></el-option>
					      </el-select>
					    </el-form-item>
					 
					  <br>
					<el-form-item>
						
						<el-button type="success" icon="el-icon-check" @click="xiugaiupdate()" circle></el-button>
					</el-form-item>
					  </el-form>
					  
			</el-dialog>
			
		</el-form>
		
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				//显示分页列表
				rooms:{
					list:[]
				},
				//预定单
				roomdue:{
					list:[]
				},
				disable:false,
				yudings:false,
				xiugai:false,
				type:{
					caozuoren:'',
					vipcode:'',
					status: 1,
					yajin:0,
					
				},
				//修改之后传的数据
				xiugaihou:{},
				stypes:{},
				//按房间类型
				roomid:'',
				//按楼层
				louceng:'',
				//时间得到是否有房间
				dates:{},
				//预定时间查询
				infodates:{},
				//判断
				rules:{
					roomcode:[
						{required:true,message:'不能空',trigger:['blur','change']},
					],
					roomtype:[
						{required:true,message:'不能空',trigger:['blur','change']},
					],
					standardprice:[
						{required:true,message:'不能空',trigger:['blur','change']}
					],
					discountprice:[
						{required:true,message:'不能空',trigger:['blur','change']},
					],
					cretype:[
						{required:true,message:'不能空',trigger:['blur','change']},
					],
					dueperson:[
						{required:true,message:'不能空',trigger:['blur','change']}
					],
					crenum:[
						{required:true,message:'不能空',trigger:['blur','change']},
					],
					phone:[
						{required:true,message:'不能空',trigger:['blur','change']},
					],
					roomnum:[
						{required:true,message:'不能空',trigger:['blur','change']}
					],
					
					leavetime:[
						{required:true,message:'不能空',trigger:['blur','change']}
					]}
			}
		},
		methods:{
			selectRoom(){
				this.pageInfo(1,5,this.roomid,this.louceng,this.dates.date);
			},
			//按条件查房间
			pageInfo(pageNum,pageSize,roomid,louceng,dates){
				console.log(dates);
				let url="roominfo/pageinfo"
				axios.post(url,`pageNum=${pageNum}&pageSize=${pageSize}&roomid=${roomid}&louceng=${louceng}&dates=${dates}`).then(resp=>{
					this.rooms = resp.data.data
					this.rooms.list.forEach(o=>{
						//o.registtime = this.parseDate(o.registtime)
						if(o.status == 1){
							o.status = '空房'
						}else if(o.status == 2){
							o.status = '已预定'
						}else if(o.status == 3){
							o.status = '已入住'
						}
						})
					console.log(this.rooms);
				})
			},
			//分页控制
			handleCurrentChange(pageNum){
				this.pageInfo(pageNum,this.rooms.pageSize,this.roomid,this.louceng,this.dates.date);
			},
			
			//预定处理
			yuding(scope){
				this.disable = true
				console.log(scope);
				
				this.stypes ={...scope}
				this.type.roomcode=this.stypes.id
				this.type.roomtype =this.stypes.roomTypeid.roletype
				this.type.standardprice =this.stypes.standardprice
				this.type.discountprice =this.stypes.discountprice
				this.type.vipprice =this.stypes.vipvip
					var Num = '';
					for (var i = 0; i < 5; i++) {
					Num += Math.floor(Math.random() * 1000);
					}
				 this.type.duenum = Num
			},
			//插入预定订单
			insertType(){
				let date = new Date()
				let dates=this.parseDate(date)
				console.log(this.type);
				if(this.type.arrivetime >dates && this.type.leavetime >dates){
					this.$refs["loginForm"].validate(valid=>{
						if(valid){
							let url ="roominfo/insertroomdue"
							axios.post(url,this.type).then(resp=>{
								if(resp.data.data == 1){
									this.type={}
									this.disable = false
								}
							})
						}})
					
				}else{
					this.$alert("请输入正确的时间！")
				}
		
			
			},
			//查找预定订单
			selectinfo(){
				if(this.infodates.infodate){
					let url ="roominfo/selectTime"
					axios.post(url,`infodate=${this.infodates.infodate}`).then(resp=>{
							this.roomdue.list=resp.data.data
							
							if(this.roomdue.list.length == 0){
								this.$alert("今天没有预定哦！");
							}else{
								this.roomdue.list.forEach(o=>{
									//o.registtime = this.parseDate(o.registtime)
									if(o.status == 1){
										o.status = '正常'
									}else if(o.status == 2){
										o.status = '已取消'
									}else if(o.status == 3){
										o.status = '已入住'
									}
									})
							}
							console.log(this.roomdue);
					})
				}else{
					this.$alert("输入时间哦！");
				}
				
			},
			//修改单号
			xiugais(scope){
				this.xiugai = true
				console.log(scope);
				let ss = scope
				this.xiugaihou = ss
				
			},
			//修改插入
			xiugaiupdate(){
				let url ="roominfo/update"
				axios.post(url,this.xiugaihou).then(resp=>{
					if(resp.data.data == 1){
						this.xiugaihou={}
						this.xiugai = false
					}
				})
			},
			//删除删除删除
			del(scope){
				console.log(scope);
				let s=scope.id
				
				this.$confirm("是否删除？","提示").then(()=>{
					let url ="roominfo/delete"
					axios.post(url,`id=${s}`).then(resp=>{
						if(resp.data.data > 1){
							this.xiugaihou={}
							this.xiugai = false
							this.$alert("删除成功");
						}
					})
				})
				
				
			},
		parseDate(s){
			    var d = new Date(s);
			    var year = d.getFullYear();
			    var month = d.getMonth()+1 < 10?'0'+(d.getMonth()+1):(d.getMonth()+1);
			    var date = d.getDate() < 10?'0'+d.getDate():d.getDate();
			    var s = year + "-" + month + "-" + date;			
			    return s;
			}
			
		}
	}
</script>

<style>
	.cons{
		
	}
	.el-input{
		width: 170px;
	}
</style>
